<template>
  <div class="xd-LearningHome-LearingItemHome">
    <el-card class="box-card" shadow="hover">
      <div slot="header" class="title">正在学习的内容</div>
      <div style="padding-bottom: 20px">
        <el-table :data="learningList" style="width: 100%" stripe border>
          <el-table-column
            prop="curriculumTitle"
            label="课程名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="curriculumTimeLong"
            label="课程时长"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="curriculumTeacher"
            label="授课人"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="lastStudyTime"
            label="最后学习时间"
            align="center"
          ></el-table-column>
          <!-- <el-table-column prop="curriculumPoints" label="学分" align="center"></el-table-column> -->
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="small"
                @click="openCourseIntroduction(scope.row)"
                >详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        @size-change="learningListSizeChange"
        @current-change="learningListPageChange"
        :current-page="learningListForm.page"
        :page-sizes="[5, 10, 20, 30, 40, 50]"
        :page-size="learningListForm.size"
        :layout="PAGE_LAYOUT"
        :total="learningListForm.total"
      ></el-pagination>
      <!-- <div class="course_panel">
        <div
          class="item"
          v-for="(item, index) in learningList"
          :key="'learning' + index"
          @click="openCourseIntroduction(item)"
          :style="{marginRight:(index+1)%3===0?'0px':''}"
        >
          <img class="cover" :src="item.imgUrl" />
          <div class="course_body">
            <p class="title" v-text="item.curriculumTitle"></p>
            <p class="p_top">课程时长：{{item.curriculumTimeLong}}</p>
            <p class="p_top">
              授课人：{{item.curriculumTeacher}}
              <span class="credits_tag">
                学分：
                <span class="text_color_429688">{{item.curriculumPoints}}</span>
              </span>
            </p>
          </div>
        </div>
        <p v-if="!learningList.length">{{NO_DATA}}</p>
      </div> -->
    </el-card>

    <el-card class="box-card" shadow="hover">
      <div slot="header" class="title">需补学的内容</div>
      <div style="padding-bottom: 20px">
        <el-table :data="supplementaryList" style="width: 100%" stripe border>
          <el-table-column
            prop="curriculumTitle"
            label="课程名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="curriculumTimeLong"
            label="课程时长"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="curriculumTeacher"
            label="授课人"
            align="center"
          ></el-table-column>
          <!-- <el-table-column prop="lastStudyTime" label="最后学习时间" align="center"></el-table-column> -->
          <!-- <el-table-column prop="curriculumPoints" label="学分" align="center"></el-table-column> -->
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="small"
                @click="openCourseIntroduction(scope.row)"
                >详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        @size-change="supplementaryListSizeChange"
        @current-change="supplementaryListPageChange"
        :current-page="learningListForm.page"
        :page-sizes="[5, 10, 20, 30, 40, 50]"
        :page-size="supplementaryListForm.size"
        :layout="PAGE_LAYOUT"
        :total="supplementaryListForm.total"
      ></el-pagination>
      <!-- <div class="course_panel">
        <div
          class="item"
          v-for="(item, index) in supplementaryList"
          :key="'learning' + index"
          @click="openCourseIntroduction(item)"
          :style="{marginRight:(index+1)%3===0?'0px':''}"
        >
          <img class="cover" :src="item.imgUrl" />
          <div class="course_body">
            <p class="title" v-text="item.curriculumTitle"></p>
            <p class="p_top">课程时长：{{item.curriculumTimeLong}}</p>
            <p class="p_top">
              授课人：{{item.curriculumTeacher}}
              <span class="credits_tag">
                学分：
                <span class="text_color_429688">{{item.curriculumPoints}}</span>
              </span>
            </p>
          </div>
        </div>
        <p v-if="!supplementaryList.length">{{NO_DATA}}</p>
      </div> -->
    </el-card>

    <el-card class="box-card" shadow="hover">
      <div slot="header" class="title" @click="changeCard">
        <span
          class="card-title-cell"
          data-idx="0"
          :class="{ 'card-unactivated': cardIndex === 1 }"
          >最新资源</span
        >
        <span
          class="card-title-cell"
          data-idx="1"
          :class="{ 'card-unactivated': cardIndex === 0 }"
          >最热资源</span
        >
      </div>
      <template v-if="cardIndex === 0">
        <div class="course_panel">
          <div
            class="item"
            v-for="(item, index) in newList"
            :key="'new' + index"
            @click="openCourseIntroduction(item)"
            :style="{ marginRight: (index + 1) % 3 === 0 ? '0px' : '' }"
          >
            <img class="cover" :src="item.imgUrl ? item.imgUrl : defaultImg" />
            <div class="course_body">
              <p class="title" v-text="item.curriculumTitle"></p>
              <p class="p_top">课程时长：{{ item.curriculumTimeLong }}</p>
              <p class="p_top">
                授课人：
                <span>{{ item.curriculumTeacher }}</span>
                <span class="credits_tag">
                  <!-- 学分：
                  <span class="text_color_429688">{{item.curriculumPoints}}</span> -->
                </span>
              </p>
            </div>
          </div>
          <p v-if="!newList.length">{{ NO_DATA }}</p>
        </div>
      </template>
      <template v-else-if="cardIndex === 1">
        <div class="course_panel">
          <div
            class="item"
            v-for="(item, index) in hotList"
            :key="'hot' + index"
            @click="openCourseIntroduction(item)"
            :style="{ marginRight: (index + 1) % 3 === 0 ? '0px' : '' }"
          >
            <img class="cover" :src="item.imgUrl ? item.imgUrl : defaultImg" />
            <div class="course_body">
              <p class="title" v-text="item.curriculumTitle"></p>
              <p class="p_top">课程时长：{{ item.curriculumTimeLong }}</p>
              <p class="p_top">
                授课人：
                <span>{{ item.curriculumTeacher }}</span>
                <span class="credits_tag">
                  <!-- 学分：
                  <span class="text_color_429688">{{item.curriculumPoints}}</span> -->
                </span>
              </p>
            </div>
          </div>
          <p v-if="!hotList.length">{{ NO_DATA }}</p>
        </div>
      </template>
    </el-card>

    <el-card class="box-card all-card">
      <div slot="header" class="title curriculum-title">
        <span>全部资源</span>
        <div class="text_size_8" style="width: 740px">
          <template v-for="item in curriculumTypeList">
            <span
              :class="[
                'curriculum-type',
                currentType == item.id ? 'cur-active' : '',
              ]"
              @click="changeCurriculumType(item.id)"
              :key="item.id"
            >
              {{ item.label }}
              <!-- <span
                class="curriculum-space"
                v-if="idx !== curriculumTypeList.length-1"
              >|</span> -->
            </span>
          </template>
        </div>
      </div>
      <div class="div-search">
        <el-date-picker
          class="search-cell"
          v-model="curriculumDateRange"
          type="daterange"
          range-separator="-" 
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
        <el-button class="search" @click="fetchCurriculum">搜索</el-button>
      </div>
      <div class="course_panel">
        <div
          class="item"
          v-for="(item, index) in curriculumList"
          :key="'curriculum' + index"
          @click="openCourseIntroduction(item)"
          :style="{ marginRight: (index + 1) % 3 === 0 ? '0px' : '' }"
        >
          <img class="cover" :src="item.imgUrl ? item.imgUrl : defaultImg" />
          <div class="course_body">
            <p class="title" v-text="item.curriculumTitle"></p>
            <p class="p_top">课程时长：{{ item.curriculumTimeLong }}</p>
            <p class="p_top">
              授课人：
              <span>{{ item.curriculumTeacher }}</span>
              <span class="credits_tag">
                <!-- 学分：
                <span class="text_color_429688">{{item.curriculumPoints}}</span> -->
              </span>
            </p>
          </div>
        </div>
        <p v-if="!curriculumList.length">{{ NO_DATA }}</p>
      </div>
      <el-pagination
        @size-change="listSizeChange"
        @current-change="listPageChange"
        :current-page="listForm.page"
        :page-sizes="[9, 20, 30, 40, 50]"
        :page-size="listForm.size"
        :layout="PAGE_LAYOUT"
        :total="listForm.total"
      ></el-pagination>
    </el-card>
    <!--     
    <el-card class="box-card" shadow="hover">
      <div slot="header" class="title curriculum-title">
        <span  class="deall">中心组补学登记</span>
        <div class="text_size_8">
          <span
            :class="['curriculum-type',centerGroupType===''?'cur-active':'']"
            @click="changeCenterGroupType('')"
          >
            全部
            <!-- <span class="curriculum-space">|</span> -->
    <!--</span>
          <span
            :class="['curriculum-type',centerGroupType===1?'cur-active':'']"
            @click="changeCenterGroupType(1)"
          >
            已完成
            <!-- <span class="curriculum-space">|</span> -->
    <!--</span>
          <span
            :class="['curriculum-type',centerGroupType===0?'cur-active':'']"
            @click="changeCenterGroupType(0)"
          >未完成</span>
        </div>
      </div>
      <div class="course_panel">
        <div
          class="item"
          v-for="(item, index) in centerGroupList"
          :key="'curriculum' + index"
          @click="openCourseIntroduction(item)"
          :style="{marginRight:(index+1)%3===0?'0px':''}"
        >
          <img class="cover" :src="item.imgUrl?item.imgUrl:defaultImg" />
          <div class="course_body">
            <p class="title" v-text="item.curriculumTitle"></p>
            <p class="p_top">课程时长：{{item.curriculumTimeLong}}</p>
            <p class="p_top">
              授课人：
              <span>{{item.curriculumTeacher}}</span>
              <span class="credits_tag">
                <!-- 学分：<span class="text_color_429688">{{item.curriculumPoints}}</span> -->
    <!--</span>
            </p>
          </div>
        </div>
        <p v-if="!centerGroupList.length">{{NO_DATA}}</p>
      </div>
      <el-pagination
        @size-change="addedSizeChange"
        @current-change="addedPageChange"
        :current-page="addedForm.page"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="addedForm.size"
        :layout="PAGE_LAYOUT"
        :total="addedForm.total"
      ></el-pagination>
    </el-card>
     -->
  </div>
</template>
<script>
import defaultImg from "@/assets/imgs/default_img.jpg";
// 普通课程列表
const LIST_PATH = "curriculum/my/list";
// 中心组补学登记
const LISTADED_PATH = "curriculum/my/addedList";
const _form = { page: 1, size: 5, total: 0 };
export default {
  name: "LearingItemHome",
  data() {
    return {
      defaultImg: defaultImg,
      learningList: [],
      newList: [],
      curriculumList: [],
      typeList: [],
      hotList: [],
      cardIndex: 0,
      supplementaryList: [],
      centerGroupList: [],
      learningListForm: Object.assign({}, _form),
      supplementaryListForm: Object.assign({}, _form),
      listForm: {
        page: 1,
        size: 9,
        total: 0,
      },
      addedForm: {
        page: 1,
        size: 10,
        total: 0,
      },
      currentType: "",
      addedStatus: "",
      centerGroupType: "",
      curriculumDateRange: null,
    };
  },
  computed: {
    curriculumType() {
      return this.$store.state.activeCurriculumType;
    },
    curriculumTypeList() {
      const value = this.$store.state.curriculumTypeList;
      return value.length ? value : [];
    },
  },
  watch: {
    curriculumType(value) {
      this.currentType = value;
    },
    currentType(value) {
      this.fetchListByType();
    },
  },
  created() {
    this.$store.commit("updateActiveMenu", "/LearningHome");
    this.fetchLearningList();
    this.fetchNewList();
    this.fetchHotList();
    this.fetchListByType();
    this.fetchSupplementaryList();
    this.fetchCenterGroupList();
  },
  methods: {
    openCourseIntroduction(item) {
      this.$router.push({
        path: "/LearningHome/Learning/CourseIntroduction",
        query: {
          tid: item.curriculumId,
        },
      });
    },
    fetchLearningList() {
      utils.post(
        "/curriculum/my/whileLearningList",
        {
          pageNumber: this.learningListForm.page,
          pageSize: this.learningListForm.size,
        },
        (res) => {
          if (res.success) {
            this.learningList = res.data.rows;
            this.learningListForm.total = res.data.total;
          }
        }
      );
    },
    fetchNewList() {
      utils.post("/curriculum/newList", {}, (res) => {
        if (res.success) {
          this.newList = res.data;
        }
      });
    },
    fetchListByType() { 
      utils.post(
        LIST_PATH,
        {
          pageNumber: this.listForm.page,
          pageSize: this.listForm.size,
          dicTypeId: this.currentType,
          startTime: this.curriculumDateRange ? this.curriculumDateRange[0] : '',
          endTime: this.curriculumDateRange ? this.curriculumDateRange[1] : '',
        },
        (res) => {
          if (res.success) {
            this.curriculumList = res.data.rows;
            this.listForm.total = res.data.total;
          }
        }
      );
    },
    fetchHotList() {
      utils.post("/curriculum/hotList", {}, (res) => {
        if (res.success) {
          this.hotList = res.data;
        }
      });
    },
    changeCard(event) {
      const index = +event.target.dataset.idx;
      this.cardIndex = index;
      this.style = "color:#cb2c21;";
    },
    changeCurriculumType(value) {
      this.currentType = value;
    },
    fetchCurriculum(){ 
        this.fetchListByType();
    },
    fetchSupplementaryList() {
      utils.post(
        "/curriculum/my/complementList",
        {
          pageNumber: this.supplementaryListForm.page,
          pageSize: this.supplementaryListForm.size,
        },
        (res) => {
          if (res.success) {
            this.supplementaryList = res.data.rows;
            this.supplementaryListForm.total = res.data.total;
          }
        }
      );
    },
    fetchCenterGroupList() {
      utils.post(
        LISTADED_PATH,
        {
          pageNumber: this.addedForm.page,
          pageSize: this.addedForm.size,
          type: 2,
          // 完成状态：1:完成 0：未完成
          isCompleted: this.addedStatus,
        },
        (res) => {
          if (res.success) {
            this.centerGroupList = res.data.rows;
            this.addedForm.total = res.data.total;
          }
        }
      );
    },
    // 需补学
    supplementaryListSizeChange(value) {
      this.supplementaryListForm.size = value;
      this.fetchSupplementaryList();
    },
    supplementaryListPageChange(value) {
      this.supplementaryListForm.page = value;
      this.fetchSupplementaryList();
    },
    // 正在学习
    learningListSizeChange(value) {
      this.learningListForm.size = value;
      this.fetchLearningList();
    },
    learningListPageChange(value) {
      this.learningListForm.page = value;
      this.fetchLearningList();
    },

    changeCenterGroupType(value) {
      this.addedStatus = value;
      this.fetchCenterGroupList();
      this.centerGroupType = value;
    },
    listSizeChange(value) {
      this.listForm.size = value;
      this.fetchListByType();
    },
    listPageChange(value) {
      this.listForm.page = value;
      this.fetchListByType();
    },
    addedSizeChange(value) {
      this.addedForm.size = value;
      this.fetchCenterGroupList();
    },
    addedPageChange(value) {
      this.addedForm.page = value;
      this.fetchCenterGroupList();
    },
  },
};
</script>
<style lang="less">
@primary-color: #cb2c21;
@white-color: #ffffff;

.xd-LearningHome-LearingItemHome {
  padding: 10px;
  .el-card {
    margin-bottom: 20px;
  }

  .course_panel {
    display: flex;
    flex-wrap: wrap;

    .item {
      cursor: pointer;
      width: 268px;
      height: 274px;
      background-color: #ffffff;
      border-radius: 4px;
      border: solid 1px #e9e9e9;
      margin-right: 10px;
      margin-bottom: 20px;
      display: flex;
      flex-direction: column;
      .cover {
        display: block;
        width: 100%;
        height: 173px;
      }

      img {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
      }

      .course_body {
        padding: 13px 12px;
        color: #666666;
        font-size: 16px;

        p {
          display: flex;
          align-items: center;
        }

        .p_top {
          margin-top: 6px;
          font-size: 14px;
        }

        .title {
          font-size: 16px;
          color: #333333;
          font-weight: bold;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .credits_tag {
          margin-left: auto;
        }
      }
    }
  }
  .all-card {
    .el-card__body {
      padding-right: 0;
    }
    // .course_panel {
    //   max-height: 800px;
    //   overflow-y: scroll;
    // }
    .div-search {
      height: 40px;
      line-height: 40px;
      margin-bottom: 20px;
      .search-cell {
        margin-right: 32px;
        *::-webkit-input-placeholder {
          color: @primary-color;
        }
        .el-input__inner {
          color: @primary-color;
        }
        .el-range-input {
          color: @primary-color;
        }
      }
      .search {
        background-color: @primary-color;
        color: @white-color;
        border: none;
      }
    }
  }
}
.card-title-cell {
  cursor: pointer;
  color: #cb2c21;
  margin-right: 1em;
  &.card-unactivated {
    color: #808080;
  }
}
.card-title-cell:hover {
  color: #cb2c21;
  font-weight: bold;
}
.curriculum-title {
  display: flex;
  justify-content: space-between;
  font-size: 18px;
  font-weight: bold;
  font-stretch: normal;
  line-height: 18px;
  letter-spacing: 0px;
  color: #333333;
  .text_size_8 {
    font-weight: normal;
    color: #999999;
  }
}
.curriculum-type {
  color: #5e6559;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  margin: 0 8px;
}
.curriculum-type:hover {
  color: #cb2c21;
  font-weight: bold;
}
.deall {
  width: 200px;
}
// .curriculum-space {
//   margin: 0 5px;
// }
</style>